<template>
  <div>
    <el-form :model="nodeModalForm"
             ref="nodeModal"
             label-placement="left"
             label-width="100px"
             :rules="nodeModalRules"
             size="small">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="节点名称"
                        prop="nodeName">
            <el-input v-model="nodeModalForm.nodeName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <table border="1"
           align="center"
           class="filter-table"
           cellspacing="0">
      <tr>
        <th width="70"><span class="iconfont icon-Add cursor_point"
                @click="handleAddFilter"></span></th>
        <th>字段</th>
        <th>条件</th>
        <th>值</th>
      </tr>
      <tr v-for="(item,index) in filter"
          :key="index">
        <td width="70">
          <span class="iconfont icon-Add cursor_point px_2"
                @click="handleAddFilter"></span>
          <span class="iconfont icon-close cursor_point px_2"
                @click="handleDeleteFilter(index)"></span>
        </td>
        <td>
          <el-select v-model="item.field"
                     @change="fieldAction(item,index)"
                     clearable
                     filterable
                     placeholder="字段"
                     class="fixed-icon">
            <el-option v-for="item in rowsList"
                       :key="item.alias"
                       :label="item.alias"
                       :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.DATA_TYPE }}</span>
            </el-option>
          </el-select>
        </td>
        <td>
          <el-select v-model="item.function"
                     clearable
                     filterable
                     placeholder="条件"
                     class="fixed-icon">
            <el-option v-for="item in functionList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </td>
        <td>
          <el-input v-if="fieldType(item.DATA_TYPE) === 'input'"
                    v-model="item.val"
                    :disabled="functionAction(item)"></el-input>
          <el-input-number v-else-if="fieldType(item.DATA_TYPE) === 'number'"
                           v-model.number="item.val"
                           :disabled="functionAction(item)">
          </el-input-number>
          <el-date-picker v-else-if="fieldType(item.DATA_TYPE) === 'date'"
                          v-model="item.val"
                          type="datetime"
                          :default-time="defaultTime">
          </el-date-picker>
        </td>
      </tr>
    </table>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain
                   @click="handleConfigCancel">取消</el-button>
        <el-button type="primary"
                   @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { functionList } from '../../../../../../utils/dict'

export default defineComponent({
  name: 'node-config-filter',
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const store = useStore()
    const rowsList = ref([])
    const flowData = computed(() => store.state.flowEtl.flowData)
    const nodeList = computed(() => flowData.value.nodeList)
    const nodeConfigClose = inject('nodeConfigClose')
    const filter = ref([])
    const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
    const nodeModalForm = ref({
      nodeName: '',
    })
    const nodeModal = ref()
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: '请输入数据源名称',
        trigger: 'blur',
      },
    })
    const fieldType = (type) => {
      if (
        [
          'tinyint',
          'smallint',
          'mediumint',
          'int',
          'integer',
          'bigint',
          'float',
          'double',
          'decimal',
        ].includes(type)
      ) {
        return 'number'
      } else if (
        ['date', 'time', 'year', 'datetime', 'timestamp'].includes(type)
      ) {
        return 'date'
      } else if (
        [
          'char',
          'varchar',
          'tinyblob',
          'tinytext',
          'blob',
          'text',
          'mediumblob',
          'mediumtext',
          'longblob',
          'longtext',
        ].includes(type)
      ) {
        return 'input'
      } else {
        return 'input'
      }
    }
    const handleConfigCancel = () => {
      nodeConfigClose()
    }
    const nodeConfigUpdate = (node) => {
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true
          item.nodeName = node.nodeName
          item.config.filter = node.filter
          item.config.fields = props.node.originFields
        }
        return item
      })
      store.commit('flowEtl/set_nodeList', nodes)
      nodeConfigClose()
    }
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeModalForm.value.filter = filter.value
          nodeConfigUpdate(nodeModalForm.value)
        } else {
          return false
        }
      })
    }
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: '',
        filter: '',
      }
    }
    const handleAddFilter = () => {
      filter.value.push({
        field: '',
        filter: '',
        val: '',
        DATA_TYPE: '',
      })
    }
    const handleDeleteFilter = (index) => {
      filter.value.splice(index, 1)
    }
    const functionAction = (item) => {
      if (['empty', 'not empty', 'null', 'notNull'].includes(item.function)) {
        return true
      } else {
        item.value = ''
        return false
      }
    }
    const fieldAction = (item, idx) => {
      let row = rowsList.value.find((row) => {
        return item.field === row.alias
      })
      filter.value[idx].DATA_TYPE = row.DATA_TYPE
    }
    onMounted(() => {
      resetForm()
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
      }
      filter.value = props.node.config.filter || []
      rowsList.value = props.node.originFields
    })
    return {
      nodeModalForm,
      nodeModalRules,
      nodeModal,
      filter,
      rowsList,
      defaultTime,
      nodeList,
      functionList,
      resetForm,
      fieldType,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      nodeConfigClose,
      handleAddFilter,
      handleDeleteFilter,
      functionAction,
      fieldAction,
    }
  },
})
</script>

<style lang="less" scoped>
.filter-table {
  color: #fff;
  border: 1px solid #489eff;
  width: 100%;

  tr {
    height: 40px;
    text-align: center;
  }
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}

.fixed-icon {
  ::v-deep .el-icon svg {
    height: 100%;
  }
}
</style>